<template>
  <div class="box_1">
    <bigscreen-header :headerName="'巴林右旗' + `${townName}`+ '农牧业统计'" />

    <div class="w_full h_full-70 flex_row_between">
      <!-- 1 -->
      <div class="w_32_p h_full flex_column_between">
        <!-- 种植种类 -->
        <div class="w_full h_49_p">
          <div class="full border_radius_10 chart_box_bgi">
            <div class="chart_title l_30 lh_30 text_center"><span @click="goToPage('/')">种植种类</span></div>
            <div class="w_full h_full-30">
              <dv-scroll-board :config="config1" />
            </div>
          </div>
        </div>

        <!-- 养植类 -->
        <div class="w_full h_49_p">
          <div class="full border_radius_10 chart_box_bgi">
            <div class="chart_title l_30 lh_30 text_center"><span>养植类</span></div>
            <kong-xin-bing-tu :value="data2" />
          </div>
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_49_p">
          <div class="w_full h_80_p">
            <da-ban-map v-if="townName == '大板镇'" />
            <su-bo-ri-ga v-if="townName == '索博日嘎镇'" />
            <xing-fu-zhi-lu v-if="townName == '幸福之路苏木'" />
            <ba-yan-hu-shuo-hamlet v-if="townName == '巴彦琥硕镇'" />
            <cha-gan-mu-lun-hamlet v-if="townName == '查干沐沦苏木'" />
            <mei-dian-hua v-if="townName == '大板煤电化基地'" />

            <ba-yan-ta-la v-if="townName == '巴彦塔拉苏木'" />
            <cha-gan-nuo-er v-if="townName == '查干诺尔镇'" />
            <bao-ri-wu-su v-if="townName == '宝日勿苏镇'" />
            <xi-la-mu-lun v-if="townName == '西拉沐沦苏木'" />

            <!-- <div class="map">
              <img src="../../../../assets/images/ba-lin-you-qi/map.png" alt="">
            </div> -->
          </div>

          <div class="w_full h_20_p">
            <div class="w_full h_10_p scroll_box color_fff" v-if="townName == '大板镇'">
              全镇总土地面积 1925 平方公里,
              全镇大小畜存栏 22.6 万头只,其中大畜牛 3.58 万头。
              永久性棚圈建设 5.3 万平方米,青贮窖建设 8300 立方米。
              至 2022 年人口 77003 人。总人口中男性 38520 人。
            </div>
            <div class="w_full h_10_p scroll_box color_fff" v-if="townName == '索博日嘎镇'">
              索博日嘎镇行政区域面积1402平方千米。2018年末,索博日嘎镇户籍人口22791人。
              2011年末,索博日嘎镇林地面积30.4万亩,其中经济林有500亩,
              防护林或者公益林有30万亩,森林覆盖率30%。
            </div>
            <div class="context_box" v-if="townName == '幸福之路苏木'">
              幸福之路苏木行政区域面积965平方千米。2018年末,幸福之路苏木户籍人口10228人。
              2018年,幸福之路苏木有工业企业7个,有营业面积超过50平方米以上的综合商店或超市7个。
            </div>
            <div class="w_full h_10_p scroll_box color_fff" v-if="townName == '巴彦琥硕镇'">
              巴彦琥硕镇有丰富的山杏资源,现有面积12万亩,其中：自然林5万亩,人工林7万亩,
              现进入丰产期的有8.2万亩,平均年产山杏核70万公斤左右,创经济价值150万元。
            </div>
            <div class="w_full h_10_p scroll_box color_fff" v-if="townName == '查干沐沦苏木'">
              查干沐沦苏木行政区域面积901平方千米。2018年末,查干沐沦苏木户籍人口7302人。
              2018年,查干沐沦苏木有工业企业5个,其中规模以上1个；有营业面积超过50平方米以上的综合商店或超市9个。
            </div>

            <div class="w_full h_10_p scroll_box color_fff" v-if="townName == '巴彦塔拉苏木'">
              巴彦塔拉苏木区域面积613.86平方千米。截至2018年末,巴彦塔拉苏木户籍人口18900人。
              截至2018年末,巴彦塔拉苏木有工业企业1家,其中规模以上工业企业1家。
            </div>

            <div class="w_full h_10_p scroll_box color_fff" v-if="townName == '查干诺尔镇'">
              查干诺尔镇行政区域面积964平方千米。2018年末,查干诺尔镇户籍人口16957人。
              2018年,大板镇有工业企业3个,有营业面积超过50平方米以上的综合商店或超市21个。
            </div>

            <div class="w_full h_10_p scroll_box color_fff" v-if="townName == '宝日勿苏镇'">
              宝日勿苏镇行政区域面积1165平方千米。2018年末,宝日勿苏镇户籍人口16957人。
              2018年,宝日勿苏镇有工业企业4个,有营业面积超过50平方米以上的综合商店或超市31个。
            </div>

            <div class="w_full h_10_p scroll_box color_fff" v-if="townName == '西拉沐沦苏木'">
              西拉沐沦苏木行政区域面积1271平方千米。2018年末,西拉沐沦苏木户籍人口13874人。
              2018年,西拉沐沦苏木有工业企业6个,有营业面积超过50平方米以上的综合商店或超市40个。
            </div>
          </div>
        </div>

        <div class="w_full h_49_p">
          <div class="full border_radius_10 chart_box_bgi" @click="goToPersonStateDetail()">
            <div class="chart_title l_30 lh_30 text_center"><span>民族人口</span></div>
            <div class="w_full h_full-30 ph_10">
              <dv-scroll-ranking-board :config="config3" />
            </div>
          </div>
        </div>
      </div> 

      <!-- 3 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_49_p">
          <div class="full border_radius_10 chart_box_bgi">
            <div class="chart_title l_30 lh_30 text_center cursor" @click="goToTownAnimalPage()"><span>嘎查村统计</span></div>
            <zhu-zhuang-tu :value="data4" @clickChart="clickBarChart" />
          </div>
        </div>
        
        <div class="w_full h_49_p">
          <div class="full border_radius_10 chart_box_bgi">
            <div class="chart_title l_30 lh_30 text_center"><span>化肥折纯施用量</span></div>
            <kong-xin-bing-tu :value="data5" />
          </div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
  import BigscreenHeader from '@/common/header/index.vue';
  
  import BingTu from '../charts/bing-tu.vue'
  import KongXinBingTu from '../charts/kong-xin-bing-tu.vue'
  import ZhuZhuangTu from '../charts/zhu-zhuang-tu.vue'

  import DaBanMap from '../maps/daBanMap.vue'
  import SuBoRiGa from '../maps/suBoRiGa.vue'
  import XingFuZhiLu from '../maps/xingFuZhiLu.vue'
  import BaYanHuShuoHamlet from '../maps/ba-yan-hu-shuo-hamlet.vue'
  import ChaGanMuLunHamlet from '../maps/cha-gan-mu-lun-hamlet.vue'
  import MeiDianHua from '../maps/mei-dian-hua.vue'
  import BaYanTaLa from '../maps/ba-yan-ta-la.vue'
  import BaoRiWuSu from '../maps/bao-ri-wu-su.vue'
  import XiLaMuLun from '../maps/xi-la-mu-lun.vue'
  import ChaGanNuoEr from '../maps/cha-gan-nuo-er.vue'

  export default {
    name: 'townPage',
    components: { 
      BigscreenHeader,
      BingTu, 
      KongXinBingTu,
      ZhuZhuangTu,
      DaBanMap, 
      SuBoRiGa, 
      XingFuZhiLu, 
      BaYanHuShuoHamlet,
      ChaGanMuLunHamlet,
      MeiDianHua,
      BaYanTaLa,
      BaoRiWuSu,
      XiLaMuLun,
      ChaGanNuoEr, 
    },
    data() {
      return {

        townId: null,
        townName: null,

        data1: {},
        data2: {},
        data4: {
          title: '嘎查村统计',
          yName: '户',
          unit: '个',
          x: ['农业嘎查', '牧业嘎查'],
          y: []
        },
        data5: {
          title: '化肥折纯施用量',
          unit: '吨',
          isShowUnit: true,
          data: []
        },
        config1: {
          header: ['种植物', '种植面积（亩）' , '总产量（吨）'],
          headerBGC: "#0f263e",
          oddRowBGC: "#041d37",
          evenRowBGC: "#00142f",
          rowNum: 7,
          align: ['left', 'center', 'right'],
          data: [],
        },
        config3: {
          header: ['民族', '人口'],
          headerHeight: 30,
          data: [],
          index: true,
          columnWidth: [50],
          rowNum: 8,
          align: ['center']
        },
        
        personList: [
          { name: '14岁以下', value: 12817 },
          { name: '15 - 64岁', value: 59606 },
          { name: '65岁以上', value: 4580 }
        ],
        mashineList: [
          { name: ' 四轮车', value: 3500 },
          { name: '大型货车', value: 18 },
          { name: '大型拖拉机', value: 91 },
          { name: '播种机械', value: 2800 },
          { name: '打草机械', value: 580 },
          { name: '家用车辆', value: 450 },
        ],

        list: [
          { name: '红旗嘎查', value: 3289 },
          { name: '吉布吐嘎查', value: 2578 },
          { name: '西哈嘎查', value: 1956 },
          { name: '十家子嘎查', value: 1664 },
          { name: '查干诺尔嘎查', value: 1239 },
          { name: '浩饶沁嘎查', value: 1217 },
          { name: '大冷嘎查', value: 1189 },
          { name: '古力古台嘎查', value: 1078 },
          { name: '苏艾力嘎查', value: 819 },
          { name: '太布呆嘎查', value: 784 },
          { name: '昭胡都格嘎查', value: 526 },
          { name: '新达冷村', value: 517 },
          { name: '苏艾里嘎查', value: 489 },
          { name: '西拉汰沦厚查', value: 475 },
          { name: '巴彦汉嘎查', value: 379 },
          { name: '温根吐嘎查', value: 334 },
          { name: '翁根图毛都嘎查', value: 321 },
          { name: '红星村', value: 267 },
          { name: '莫日古其格', value: 229 },
          { name: '独希嘎查', value: 219 },
          { name: '新立村', value: 207 },
          { name: '友爱村', value: 198 },
          { name: '益斯毛都嘎查', value: 169 },
          { name: '准宝日嘎查', value: 157 },
          { name: '巴罕村', value: 142 },
          { name: '套白村', value: 115 }
        ],
        db_list1: [
          { name: '红旗嘎查', value: 3289 },
          { name: '吉布吐嘎查', value: 2578 },
          { name: '西哈嘎查', value: 1956 },
          { name: '十家子嘎查', value: 1664 },
          { name: '查干诺尔嘎查', value: 1239 },
          { name: '浩饶沁嘎查', value: 1217 },
          { name: '大冷嘎查', value: 1189 },
          { name: '古力古台嘎查', value: 1078 },
          { name: '苏艾力嘎查', value: 819 },
          { name: '太布呆嘎查', value: 784 },
          { name: '昭胡都格嘎查', value: 526 },
          { name: '新达冷村', value: 517 },
          { name: '苏艾里嘎查', value: 489 },
          { name: '西拉汰沦厚查', value: 475 },
          { name: '巴彦汉嘎查', value: 379 },
          { name: '温根吐嘎查', value: 334 },
          { name: '翁根图毛都嘎查', value: 321 },
          { name: '红星村', value: 267 },
          { name: '莫日古其格', value: 229 },
          { name: '独希嘎查', value: 219 },
          { name: '新立村', value: 207 },
          { name: '友爱村', value: 198 },
          { name: '益斯毛都嘎查', value: 169 },
          { name: '准宝日嘎查', value: 157 },
          { name: '巴罕村', value: 142 },
          { name: '套白村', value: 115 }
        ],

        db_list2: [
          { name: '昭胡都格嘎查', value: 1230 },
          { name: '新达冷村', value: 1139 },
          { name: '苏艾里嘎查', value: 1024 },
          { name: '西拉汰沦厚查', value: 983 },
          { name: '巴彦汉嘎查', value: 974 },
          { name: '温根吐嘎查', value: 889 },
          { name: '浩饶沁嘎查', value: 853 },
          { name: '大冷嘎查', value: 845 },
          { name: '古力古台嘎查', value: 814 },
          { name: '红旗嘎查', value: 769 },
          { name: '吉布吐嘎查', value: 748 },
          { name: '西哈嘎查', value: 698 },
          { name: '温根吐嘎查', value: 683 },
          { name: '十家子嘎查', value: 669 },
          { name: '苏艾力嘎查', value: 653 },
          { name: '太布呆嘎查', value: 643 },
          { name: '翁根图毛都嘎查', value: 600 },
          { name: '红星村', value: 550 },
          { name: '莫日古其格', value: 500 },
          { name: '独希嘎查', value: 300 },
          { name: '新立村', value: 250 },
          { name: '友爱村', value: 200 },
          { name: '益斯毛都嘎查', value: 100 },
          { name: '准宝日嘎查', value: 90 },
          { name: '巴罕村', value: 0 },
          { name: '套白村', value: 0 },
        ],

        db_list3: [
          { name: '翁根图毛都嘎查', value: 2567 },
          { name: '红星村', value: 2457 },
          { name: '莫日古其格', value: 2345 },
          { name: '独希嘎查', value: 2133 },
          { name: '新立村', value: 2013 },
          { name: '友爱村', value: 1974 },
          { name: '益斯毛都嘎查', value: 1968 },
          { name: '准宝日嘎查', value: 1956 },
          { name: '巴罕村', value: 1867 },
          { name: '套白村', value: 1849 },
          { name: '浩饶沁嘎查', value: 1770 },
          { name: '大冷嘎查', value: 1639 },
          { name: '古力古台嘎查', value: 1426 },
          { name: '红旗嘎查', value: 1283 },
          { name: '吉布吐嘎查', value: 1174 },
          { name: '西哈嘎查', value: 1045 },
          { name: '温根吐嘎查', value: 924 },
          { name: '十家子嘎查', value: 916 },
          { name: '苏艾力嘎查', value: 905 },
          { name: '太布呆嘎查', value: 895 },
          { name: '昭胡都格嘎查', value: 789 },
          { name: '新达冷村', value: 765},
          { name: '苏艾里嘎查', value: 761 },
          { name: '西拉汰沦厚查', value: 750 },
          { name: '巴彦汉嘎查', value: 723 },
          
        ],

        db_list4: [
        { name: '大冷嘎查', value: 2245 },
          { name: '古力古台嘎查', value: 2187 },
          { name: '红旗嘎查', value: 2013 },
          { name: '吉布吐嘎查', value: 1987 },
          { name: '西哈嘎查', value: 1957 },
          { name: '十家子嘎查', value: 1859 },
          { name: '浩饶沁嘎查', value: 1670 },
          { name: '苏艾力嘎查', value: 957 },
          { name: '太布呆嘎查', value: 889 },
          { name: '温根吐嘎查', value: 846 },
          { name: '昭胡都格嘎查', value: 789 },
          { name: '新达冷村', value: 745},
          { name: '苏艾里嘎查', value: 721 },
          { name: '西拉汰沦厚查', value: 710 },
          { name: '巴彦汉嘎查', value: 703 },
          { name: '翁根图毛都嘎查', value: 629 },
          { name: '红星村', value: 589 },
          { name: '莫日古其格', value: 456 },
          { name: '独希嘎查', value: 410 },
          { name: '新立村', value: 340 },
          { name: '友爱村', value: 325 },
          { name: '益斯毛都嘎查', value: 230 },
          { name: '准宝日嘎查', value: 160 },
          { name: '巴罕村', value: 154 },
          { name: '套白村', value: 87 },
        ],

        cg_list1: [
          { name: '沙巴尔台嘎查', value: 2699 },
          { name: '塔本花嘎查', value: 2582 },
          { name: '呼特勒嘎查', value: 2378 },
          { name: '呼勒斯图布郎嘎查', value: 2139 },
          { name: '查干锡热嘎查', value: 1929 },
          { name: '浩伊日毛都村', value: 1887 },
          { name: '毛敦敦达嘎查', value: 1760 },
          { name: '珠腊沁嘎查', value: 1659 },
          { name: '查干沐沦嘎查', value: 1546 },
          { name: '巴彦锡那村', value: 1467 },
          { name: '达马金村', value: 1356 },
          { name: '岗根村', value: 1054 },
          { name: '亚玛图村', value: 834 },
        ],

        cg_list2: [
          { name: '塔本花嘎查', value: 1082 },
          { name: '呼特勒嘎查', value: 878 },
          { name: '亚玛图村', value: 634 },
          { name: '查干锡热嘎查', value: 529 },
          { name: '沙巴尔台嘎查', value: 499 },
          { name: '浩伊日毛都村', value: 417 },
          { name: '毛敦敦达嘎查', value: 390 },
          { name: '岗根村', value: 304 },
          { name: '查干沐沦嘎查', value: 296 },
          { name: '呼勒斯图布郎嘎查', value: 269 },
          { name: '巴彦锡那村', value: 196 },
          { name: '达马金村', value: 156 },
          { name: '珠腊沁嘎查', value: 109 },
        ],

        cg_list3: [
          { name: '查干锡热嘎查', value: 1029 },
          { name: '沙巴尔台嘎查', value: 999 },
          { name: '浩伊日毛都村', value: 887 },
          { name: '毛敦敦达嘎查', value: 860 },
          { name: '岗根村', value: 754 },
          { name: '查干沐沦嘎查', value: 646 },
          { name: '亚玛图村', value: 534 },
          { name: '呼勒斯图布郎嘎查', value: 439 },
          { name: '巴彦锡那村', value: 367 },
          { name: '达马金村', value: 256 },
          { name: '珠腊沁嘎查', value: 159 },
          { name: '塔本花嘎查', value: 82 },
          { name: '呼特勒嘎查', value: 78 },
        ],

        cg_list4: [
          { name: '毛敦敦达嘎查', value: 1560 },
          { name: '岗根村', value: 1254 },
          { name: '达马金村', value: 1156 },
          { name: '珠腊沁嘎查', value: 1059 },
          { name: '塔本花嘎查', value: 982 },
          { name: '呼特勒嘎查', value: 878 },
          { name: '沙巴尔台嘎查', value: 799 },
          { name: '浩伊日毛都村', value: 687 },
          { name: '查干沐沦嘎查', value: 546 },
          { name: '亚玛图村', value: 434 },
          { name: '查干锡热嘎查', value: 329 },
          { name: '呼勒斯图布郎嘎查', value: 239 },
          { name: '巴彦锡那村', value: 167 },
        ]
      }
    },
    computed: {
      initData() {
        if (this.townName == '大板镇') {
          this.config1.data = [
            ["粳稻", 10995, 5967],
            ["玉米", 74715, 24656],
            ["谷子", 4650, 890],
            ["高粱", 255, 118],
            ["荞麦", 1545, 199],
            ["豆类合计", 10274, 15508],
            ["大豆", 10274, 948],
            ["优质高效大豆", 10274, 948],
            ["马铃薯", 1515, 826],
            ["向日葵籽",5160, 953],
            ["瓜类（果用瓜）", 315, 653],
            ["西瓜", 60, 240],
            ["甜瓜", 255, 413],
            ["其他农作物", 16005, ],
            ["青饲料", 16005, ],
          ]
          this.config3.data = [{"name": "汉族", "value": 39292, "unit": '人'},
            {"name": "蒙族 ", "value": 35025, "unit": '人 '},
            {"name": "回族", "value": 435, "unit": '人'},
            {"name": "满族", "value": 1344, "unit": '人'},
            {"name": "朝鲜族", "value": 109, "unit": '人'},
            {"name": "达翰尔族", "value": 18, "unit": '人'},
            {"name": "鄂温克族", "value": 8, "unit": '人'},
            {"name": "鄂伦春族", "value": 2, "unit": '人'},
            {"name": "壮族", "value": 9,  "unit": '人'},
            {"name": "藏族", "value": 1, "unit": '人'},
            {"name": "锡伯族", "value": 4, "unit": '人'},
            {"name": "苗族", "value": 5, "unit": '人'},
            {"name": "土家族", "value": 24, "unit": '人'},
            {"name": "彝族", "value": 2, "unit": '人'},
            {"name": "维吾尔族", "value": 0, "unit": '人'},
            {"name": "布依族", "value": 0, "unit": '人'},
            {"name": "侗族", "value": 0, "unit": '人'},
            {"name": "瑶族", "value": 0,  "unit": '人'},
            {"name": "俄罗斯族", "value":2, "unit": '人'},
            {"name": "郝哲族", "value": 0, "unit": '人'},
            {"name": "黎族", "value": 4, "unit": '人'},
            {"name": "佤族", "value": 0, "unit": '人'},
            {"name": "穿青族", "value": 0, "unit": '人'}
          ]
          this.data2 = {
            title: '',
            unit: '',
            isShowUnit: false,
            data: [
              {"name": "地膜覆盖面积", "value": 69977, "unit": '亩'},
              {"name": "农用柴油使用量", "value": 958, "unit": '吨'},
              {"name": "农药使用量", "value": 14334, "unit": '公斤'}
            ]
          }
          this.data4.y = [13, 17]
          this.data5.data =  [
            {"name": "氮肥", "value": 308, "unit": ''},
            {"name": "磷肥", "value": 135, "unit": ''},
            {"name": "钾肥", "value": 15, "unit": ''},
            {"name": "复合肥", "value": 990, "unit": ''}
          ]
        } else if (this.townName == '巴彦琥硕镇') {
          this.config1.data = [
            ["玉米", 34057, 10546],
            ["谷子", 767, 285.5],
            ["荞麦", 1402, 210],
            ["优质高效大豆", 4753, 603],
            ["马铃薯", 2025, 810],
            ["向日葵籽", 2550, 230],
            ["甜菜", 803, ],
            ["药材", 610, ],
            ["其他农作物", 2335, ],
            ["青饲料", 2041, ],
          ]
          this.config3.data = [
            {"name": "汉族", "value": 5432, "unit": '人'},
            {"name": "蒙族 ", "value": 1593, "unit": '人 '},
            {"name": "回族", "value": 5, "unit": '人'},
            {"name": "满族", "value": 137, "unit": '人'},
            {"name": "朝鲜族", "value": 0, "unit": '人'},
            {"name": "达翰尔族", "value": 1, "unit": '人'},
            {"name": "鄂温克族", "value": 0, "unit": '人'},
            {"name": "鄂伦春族", "value": 0, "unit": '人'},
            {"name": "壮族", "value": 0,  "unit": '人'},
            {"name": "藏族", "value": 0,"unit": '人'},
            {"name": "锡伯族", "value": 0, "unit": '人'},
            {"name": "苗族", "value": 1,"unit": '人'},
            {"name": "土家族", "value": 0, "unit": '人'},
            {"name": "彝族", "value": 0, "unit": '人'},
            {"name": "维吾尔族", "value": 0, "unit": '人'},
            {"name": "布依族", "value": 0, "unit": '人'},
            {"name": "侗族", "value": 0, "unit": '人'},
            {"name": "瑶族", "value": 0,  "unit": '人'},
            {"name": "俄罗斯族", "value":0,"unit": '人'},
            {"name": "郝哲族", "value": 0, "unit": '人'},
            {"name": "黎族", "value": 0, "unit": '人'},
            {"name": "佤族", "value": 0, "unit": '人'},
            {"name": "穿青族", "value": 0, "unit": '人'},
          ]
          this.data2 = {
            title: '',
            unit: '',
            isShowUnit: false,
            data: [
              {"name": "地膜覆盖面积", "value": 58000, "unit": '亩'},
              {"name": "农用柴油使用量", "value": 146, "unit": '吨'},
              {"name": "农药使用量", "value": 7090, "unit": '公斤'}
            ]
          }
          this.data4.y = [10, 1]
          this.data5.data =  [
            {"name": "氮肥", "value": 94, "unit": ''},
            {"name": "磷肥", "value": 76, "unit": ''},
            {"name": "钾肥", "value": 98, "unit": ''},
            {"name": "复合肥", "value": 371, "unit": ''}
          ]
        } else if (this.townName == '巴彦塔拉苏木') {
          this.config1.data = [
            ["玉米", 87435, 30020],
            ["谷子", 285, 46],
            ["荞麦", 10935, 1330],
            ["优质高效大豆", 12252, 1980],
            ["马铃薯", 6450, 1350],
            ["向日葵籽", 15600, 2450],
            ["甜菜", 3900, 12900],
            ["药材", 300, ],
            ["西瓜", 2250, 8010],
            ["其他农作物", 34980, ],
            ["青饲料", 34980, ],
          ]
          this.config3.data = [
            {"name": "汉族", "value": 3533, "unit": '人'},
            {"name": "蒙族 ", "value": 6472, "unit": '人'},
            {"name": "回族", "value": 6, "unit": '人'},
            {"name": "满族", "value": 118, "unit": '人'},
            {"name": "朝鲜族", "value": 0, "unit": '人'},
            {"name": "达翰尔族", "value": 0, "unit": '人'},
            {"name": "鄂温克族", "value": 0, "unit": '人'},
            {"name": "鄂伦春族", "value": 0, "unit": '人'},
            {"name": "壮族", "value": 0,  "unit": '人'},
            {"name": "藏族", "value": 0,"unit": '人'},
            {"name": "锡伯族", "value": 0, "unit": '人'},
            {"name": "苗族", "value": 0, "unit": '人'},
            {"name": "土家族", "value": 0, "unit": '人'},
            {"name": "彝族", "value": 0, "unit": '人'},
            {"name": "维吾尔族", "value": 0, "unit": '人'},
            {"name": "布依族", "value": 0, "unit": '人'},
            {"name": "侗族", "value": 0, "unit": '人'},
            {"name": "瑶族", "value": 0,  "unit": '人'},
            {"name": "俄罗斯族", "value":0,"unit": '人'},
            {"name": "郝哲族", "value": 0, "unit": '人'},
            {"name": "黎族", "value": 0, "unit": '人'},
            {"name": "佤族", "value": 0, "unit": '人'},
            {"name": "穿青族", "value": 0, "unit": '人'},
          ]
          this.data2 = {
            title: '',
            unit: '',
            isShowUnit: false,
            data: [
              {"name": "地膜覆盖面积", "value": 95000, "unit": '亩'},
              {"name": "农用柴油使用量", "value": 387, "unit": '吨'},
              {"name": "农药使用量", "value": 21500, "unit": '公斤'}
            ]
          }
          this.data4.y = [3, 8]
          this.data5.data =  [
            {"name": "氮肥", "value": 280, "unit": ''},
            {"name": "磷肥", "value": 139, "unit": ''},
            {"name": "钾肥", "value": 16, "unit": ''},
            {"name": "复合肥", "value": 865, "unit": ''}
          ]
        } else if (this.townName == '宝日勿苏镇') {
          this.config1.data = [
            ["玉米", 182160, 60129],
            ["谷子", 49639, 11916],
            ["高粱", 10753, 2904],
            ["荞麦", 5829, 875],
            ["优质高效大豆", 25737, 2445],
            ["绿豆", 13185, 850],
            ["马铃薯", 1785, 535],
            ["向日葵籽", 31465, 12586],
            ["西瓜", 275, 1153]
          ]
          this.config3.data = [
            {"name": "汉族", "value": 5798, "unit": '人'},
            {"name": "蒙族 ", "value": 10511, "unit": '人 '},
            {"name": "回族", "value": 3, "unit": '人'},
            {"name": "满族", "value": 375, "unit": '人'},
            {"name": "朝鲜族", "value": 2, "unit": '人'},
            {"name": "达翰尔族", "value": 0, "unit": '人'},
            {"name": "鄂温克族", "value": 0, "unit": '人'},
            {"name": "鄂伦春族", "value": 0, "unit": '人'},
            {"name": "壮族", "value": 0,  "unit": '人'},
            {"name": "藏族", "value": 0,"unit": '人'},
            {"name": "锡伯族", "value": 0, "unit": '人'},
            {"name": "苗族", "value": 0, "unit": '人'},
            {"name": "土家族", "value": 0, "unit": '人'},
            {"name": "彝族", "value": 0, "unit": '人'},
            {"name": "维吾尔族", "value": 0, "unit": '人'},
            {"name": "布依族", "value": 0, "unit": '人'},
            {"name": "侗族", "value": 0, "unit": '人'},
            {"name": "瑶族", "value": 0,  "unit": '人'},
            {"name": "俄罗斯族", "value":0,"unit": '人'},
            {"name": "郝哲族", "value": 3, "unit": '人'},
            {"name": "黎族", "value": 2, "unit": '人'},
            {"name": "佤族", "value": 0, "unit": '人'},
            {"name": "穿青族", "value": 0, "unit": '人'},
          ]
          this.data2 = {
            title: '',
            unit: '',
            isShowUnit: false,
            data: [
              {"name": "地膜覆盖面积", "value": 198416, "unit": '亩'},
              {"name": "农用柴油使用量", "value": 995, "unit": '吨'},
              {"name": "农药使用量", "value": 39895, "unit": '公斤'}
            ]
          }
          this.data4.y = [8, 11]
          this.data5.data =  [
            {"name": "氮肥", "value": 1070, "unit": ''},
            {"name": "磷肥", "value": 458, "unit": ''},
            {"name": "钾肥", "value": 48, "unit": ''},
            {"name": "复合肥", "value": 2594, "unit": ''}
          ]
        } else if (this.townName == '查干沐沦苏木') {
          this.config1.data = [
            ["玉米", 20378, 5553],
            ["谷子", 3112, 498],
            ["高粱", 1800, 540],
            ["荞麦", 375, 42],
            ["优质高效大豆", 3989, 383],
            ["杂豆", 365, 35],
            ["向日葵籽", 2620, 393],
            ["甜菜", 1400, 4200],
            ["其他农作物", 10435, ],
            ["青饲料", 10435, ],
          ]
          this.config3.data = [
            {"name": "汉族", "value": 2403, "unit": '人'},
            {"name": "蒙族 ", "value": 4677, "unit": '人 '},
            {"name": "回族", "value": 0, "unit": '人'},
            {"name": "满族", "value": 9, "unit": '人'},
            {"name": "朝鲜族", "value": 0, "unit": '人'},
            {"name": "达翰尔族", "value": 0, "unit": '人'},
            {"name": "鄂温克族", "value": 0, "unit": '人'},
            {"name": "鄂伦春族", "value": 0, "unit": '人'},
            {"name": "壮族", "value": 0,  "unit": '人'},
            {"name": "藏族", "value": 0,"unit": '人'},
            {"name": "锡伯族", "value": 0, "unit": '人'},
            {"name": "苗族", "value": 0, "unit": '人'},
            {"name": "土家族", "value": 0, "unit": '人'},
            {"name": "彝族", "value": 1, "unit": '人'},
            {"name": "维吾尔族", "value": 0, "unit": '人'},
            {"name": "布依族", "value": 0, "unit": '人'},
            {"name": "侗族", "value": 0, "unit": '人'},
            {"name": "瑶族", "value": 0,  "unit": '人'},
            {"name": "俄罗斯族", "value":0,"unit": '人'},
            {"name": "郝哲族", "value": 0, "unit": '人'},
            {"name": "黎族", "value": 0, "unit": '人'},
            {"name": "佤族", "value": 0, "unit": '人'},
            {"name": "穿青族", "value": 0, "unit": '人'},
          ]
          this.data2 = {
            title: '',
            unit: '',
            isShowUnit: false,
            data: [
              {"name": "地膜覆盖面积", "value": 28000, "unit": '亩'},
              {"name": "农用柴油使用量", "value": 63, "unit": '吨'},
              {"name": "农药使用量", "value": 4933, "unit": '公斤'}
            ]
          }
          this.data4.y = [4, 8]
          this.data5.data =  [
            {"name": "氮肥", "value": 93, "unit": ''},
            {"name": "磷肥", "value": 37, "unit": ''},
            {"name": "钾肥", "value": 4, "unit": ''},
            {"name": "复合肥", "value": 330, "unit": ''}
          ]
        } else if (this.townName == '查干诺尔镇') {
          this.config1.data = [
            ["粮食作物合计", 127489, 34457],
            ["谷物", 111881, 35029],
            ["玉米", 84229, 26500],
            ["谷子", 11981, 300],
            ["高粱", 2524, 807],
            ["荞麦", 13147, 1722],
            ["豆类合计", 15508, 2400],
            ["大豆", 14373, 2300],
            ["优质高效大豆", 14373, 2300],
            ["杂豆", 1135, 100],
            ["绿豆", 1135, 100],
            ["马铃薯", 100, 28],
            ["向日葵籽", 17650, 3250],
            ["蔬菜,瓜类",1048, 2155],
            ["蔬菜（含菜用瓜）", 88, 195],
            ["瓜类（果用瓜）", 960, 1960],
            ["甜瓜", 960,1960 ],
            ["其他农作物", 11360, ],
            ["青饲料", 10110, ],
          ]
          this.config3.data = [
            {"name": "汉族", "value": 9775, "unit": '人'},
            {"name": "蒙族 ", "value": 5166, "unit": '人 '},
            {"name": "回族", "value": 10, "unit": '人'},
            {"name": "满族", "value": 208, "unit": '人'},
            {"name": "朝鲜族", "value": 4, "unit": '人'},
            {"name": "达翰尔族", "value": 1, "unit": '人'},
            {"name": "鄂温克族", "value": 0, "unit": '人'},
            {"name": "鄂伦春族", "value": 0, "unit": '人'},
            {"name": "壮族", "value": 0,  "unit": '人'},
            {"name": "藏族", "value": 0,"unit": '人'},
            {"name": "锡伯族", "value": 0, "unit": '人'},
            {"name": "苗族", "value": 1, "unit": '人'},
            {"name": "土家族", "value": 0, "unit": '人'},
            {"name": "彝族", "value": 0, "unit": '人'},
            {"name": "维吾尔族", "value": 0, "unit": '人'},
            {"name": "布依族", "value": 0, "unit": '人'},
            {"name": "侗族", "value": 1, "unit": '人'},
            {"name": "瑶族", "value": 0,  "unit": '人'},
            {"name": "俄罗斯族", "value":0,"unit": '人'},
            {"name": "郝哲族", "value": 0, "unit": '人'},
            {"name": "黎族", "value": 0, "unit": '人'},
            {"name": "佤族", "value": 0, "unit": '人'},
            {"name": "穿青族", "value": 0, "unit": '人'},
          ]
          this.data2 = {
            title: '',
            unit: '',
            isShowUnit: false,
            data: [
              {"name": "地膜覆盖面积", "value": 67000, "unit": '亩'},
              {"name": "农用柴油使用量", "value": 196, "unit": '吨'},
              {"name": "农药使用量", "value": 18993, "unit": '公斤'}
            ]
          }
          this.data4.y = [8, 6]
          this.data5.data =  [
            {"name": "氮肥", "value": 90, "unit": ''},
            {"name": "磷肥", "value": 70, "unit": ''},
            {"name": "钾肥", "value": 82, "unit": ''},
            {"name": "复合肥", "value": 1200, "unit": ''}
          ]
        } else if (this.townName == '索博日嘎镇') {
          this.config1.data = [
            ["硬粒小麦", 6705, 1363],
            ["玉米", 43005, 12532],
            ["荞麦", 450, 51],
            ["其他谷物", 375, 56],
            ["优质高效大豆", 15808, 2028],
            ["杂豆", 15, 1],
            ["向日葵籽", 225, 26],
            ["甜菜", 1050, 1560],
            ["药材", 1590, ],
            ["蔬菜,瓜类",,  9351],
            ["其他农作物", 21105, ],
            ["青饲料", 21105, ],
          ]
          this.config3.data = [
            {"name": "汉族", "value": 14675, "unit": '人'},
            {"name": "蒙族 ", "value": 6826, "unit": '人 '},
            {"name": "回族", "value": 29, "unit": '人'},
            {"name": "满族", "value": 295, "unit": '人'},
            {"name": "朝鲜族", "value": 3, "unit": '人'},
            {"name": "达翰尔族", "value": 4, "unit": '人'},
            {"name": "鄂温克族", "value": 0, "unit": '人'},
            {"name": "鄂伦春族", "value": 0, "unit": '人'},
            {"name": "壮族", "value": 0,  "unit": '人'},
            {"name": "藏族", "value": 0,"unit": '人'},
            {"name": "锡伯族", "value": 0, "unit": '人'},
            {"name": "苗族", "value": 3, "unit": '人'},
            {"name": "土家族", "value": 0, "unit": '人'},
            {"name": "彝族", "value": 2, "unit": '人'},
            {"name": "维吾尔族", "value": 0, "unit": '人'},
            {"name": "布依族", "value": 2, "unit": '人'},
            {"name": "侗族", "value": 0, "unit": '人'},
            {"name": "瑶族", "value": 0,  "unit": '人'},
            {"name": "俄罗斯族", "value":0, "unit": '人'},
            {"name": "郝哲族", "value": 0, "unit": '人'},
            {"name": "黎族", "value": 0, "unit": '人'},
            {"name": "佤族", "value": 0, "unit": '人'},
            {"name": "穿青族", "value": 1, "unit": '人'},
          ]
          this.data2 = {
            title: '',
            unit: '',
            isShowUnit: false,
            data: [
              {"name": "地膜覆盖面积", "value": 8851, "unit": '亩'},
              {"name": "农用柴油使用量", "value": 223, "unit": '吨'},
              {"name": "农药使用量", "value": 19992, "unit": '公斤'}
            ]
          }
          this.data4.y = [14, 6]
          this.data5.data =  [
            {"name": "氮肥", "value": 108, "unit": ''},
            {"name": "磷肥", "value": 43, "unit": ''},
            {"name": "钾肥", "value": 51, "unit": ''},
            {"name": "复合肥", "value": 513, "unit": ''}
          ]
        } else if (this.townName == '西拉沐沦苏木') {
          this.config1.data = [
            ["粳稻", 5170, 3206],
            ["玉米", 293202, 100091],
            ["谷子", 42930, 11637],
            ["高粱", 8022, 2534],
            ["优质高效大豆", 43388, 3296],
            ["绿豆", 2376, 143],
            ["花生", 7960, 1990],
            ["向日葵籽", 72447, 15727],
            ["甜菜", 6701, 24323],
            ["蔬菜,瓜类",  4500, 14085],
            ["西瓜", 4350, 13710],
            ["甜瓜", 150, 375],
            ["其他农作物", 14379, ],
            ["青饲料", 14379, ],
          ]
          this.config3.data = [
            {"name": "汉族", "value": 2541, "unit": '人'},
            {"name": "蒙族 ", "value": 11112, "unit": '人 '},
            {"name": "回族", "value": 1, "unit": '人'},
            {"name": "满族", "value": 84, "unit": '人'},
            {"name": "朝鲜族", "value": 78, "unit": '人'},
            {"name": "达翰尔族", "value": 0, "unit": '人'},
            {"name": "鄂温克族", "value": 0, "unit": '人'},
            {"name": "鄂伦春族", "value": 0, "unit": '人'},
            {"name": "壮族", "value": 0,  "unit": '人'},
            {"name": "藏族", "value": 0,"unit": '人'},
            {"name": "锡伯族", "value": 0, "unit": '人'},
            {"name": "苗族", "value": 0,"unit": '人'},
            {"name": "土家族", "value": 0, "unit": '人'},
            {"name": "彝族", "value": 0, "unit": '人'},
            {"name": "维吾尔族", "value": 0, "unit": '人'},
            {"name": "布依族", "value": 0, "unit": '人'},
            {"name": "侗族", "value": 0, "unit": '人'},
            {"name": "瑶族", "value": 0,  "unit": '人'},
            {"name": "俄罗斯族", "value":0,"unit": '人'},
            {"name": "郝哲族", "value": 0, "unit": '人'},
            {"name": "黎族", "value": 0, "unit": '人'},
            {"name": "佤族", "value": 0, "unit": '人'},
            {"name": "穿青族", "value": 0, "unit": '人'},
          ]
          this.data2 = {
            title: '',
            unit: '',
            isShowUnit: false,
            data: [
              {"name": "地膜覆盖面积", "value": 236000, "unit": '亩'},
              {"name": "农用柴油使用量", "value": 300, "unit": '吨'},
              {"name": "农药使用量", "value": 63000, "unit": '公斤'}
            ]
          }
          this.data4.y = [5, 15]
          this.data5.data = [
            {"name": "氮肥", "value": 990, "unit": ''},
            {"name": "磷肥", "value": 455, "unit": ''},
            {"name": "钾肥", "value": 956, "unit": ''},
            {"name": "复合肥", "value": 2088, "unit": ''}
          ]
        } else if (this.townName == '幸福之路苏木') {
          this.config1.data = [
            ["玉米", 79496, 26246],
            ["谷子", 7563, 1565],
            ["高粱", 1794, 318],
            ["荞麦", 1237, 101.1],
            ["优质高效大豆", 10137, 1238],
            ["杂豆", 200, 40],
            ["向日葵籽", 7722, 1606],
            ["甜菜", 1115, 4181],
            ["药材", 30, ],
            ["蔬菜（含菜用瓜）", 10, 2],
            ["西瓜", 30, 150],
            ["其他农作物", 21724, ],
            ["青饲料", 10704, ],
          ]
          this.config3.data = [
            {"name": "汉族", "value": 2473, "unit": '人'},
            {"name": "蒙族 ", "value": 7415, "unit": '人 '},
            {"name": "回族", "value": 3, "unit": '人'},
            {"name": "满族", "value": 167, "unit": '人'},
            {"name": "朝鲜族", "value": 0, "unit": '人'},
            {"name": "达翰尔族", "value": 0, "unit": '人'},
            {"name": "鄂温克族", "value": 0, "unit": '人'},
            {"name": "鄂伦春族", "value": 0, "unit": '人'},
            {"name": "壮族", "value": 0,  "unit": '人'},
            {"name": "藏族", "value": 0,"unit": '人'},
            {"name": "锡伯族", "value": 0, "unit": '人'},
            {"name": "苗族", "value": 1, "unit": '人'},
            {"name": "土家族", "value": 0, "unit": '人'},
            {"name": "彝族", "value": 0, "unit": '人'},
            {"name": "维吾尔族", "value": 1, "unit": '人'},
            {"name": "布依族", "value": 0, "unit": '人'},
            {"name": "侗族", "value": 0, "unit": '人'},
            {"name": "瑶族", "value": 1,  "unit": '人'},
            {"name": "俄罗斯族", "value":0,"unit": '人'},
            {"name": "郝哲族", "value": 0, "unit": '人'},
            {"name": "黎族", "value": 3, "unit": '人'},
            {"name": "佤族", "value": 1, "unit": '人'},
            {"name": "穿青族", "value": 0, "unit": '人'},
          ]
          this.data2 = {
            title: '',
            unit: '',
            isShowUnit: false,
            data: [
              {"name": "地膜覆盖面积", "value": 57000, "unit": '亩'},
              {"name": "农用柴油使用量", "value": 1309, "unit": '吨'},
              {"name": "农药使用量", "value": 16700, "unit": '公斤'}
            ]
          }
          this.data4.y = [7, 11]
          this.data5.data =  [
            {"name": "氮肥", "value": 434, "unit": ''},
            {"name": "磷肥", "value": 42, "unit": ''},
            {"name": "钾肥", "value": 100, "unit": ''},
            {"name": "复合肥", "value": 913, "unit": ''}
          ]
        }

        this.data4 = {...this.data4}
        this.data5 = {...this.data5}
      }
    },
    mounted() {
      let townId = this.$route.params.townId
      let townName = this.$route.params.townName

      this.townId = townId
      this.townName = townName

      this.initData()

      if (townName == '大板镇') {
        this.list = this.db_list1
      } else {
        this.list = this.cg_list1
      }

      setTimeout(() => {
        this.initChart()
      }, 100)
    },
    methods: {
      // 初始化图表
      initChart() {
        this.data1 = {
          title: '种植种类',
          unit: '万亩',
          data: [
            {"name": "水稻", "value": 2.6, "unit": ''},
            {"name": "甜菜", "value": 1.23, "unit": ''},
            {"name": "西瓜、香瓜", "value": 1.5, "unit": ''},
          ]
        }
      },

      clickBarChart(params) {
        // debugger
      },

      // 跳转到 xxxx 镇的 嘎查村页面 
      goToTownAnimalPage() {
        this.$router.push({
          path: `/bigscreen/townAnimal/${this.townId}/${this.townName}`
        })
      },

      clickTab(val) {
        if (this.townName == '大板镇' && val == 0) {
          this.list = this._db_list1
        } else if (this.townName == '大板镇' && val == 1) {
          this.list = this.db_list2
        } else if (this.townName == '大板镇' && val == 2) {
          this.list = this.db_list3
        } else if (this.townName == '大板镇' && val == 3) {
          this.list = this.db_list4
        } else if (this.townName == '查干沐沦苏木' && val == 0) {
          this.list = this.cg_list1
        } else if (this.townName == '查干沐沦苏木' && val == 1) {
          this.list = this.cg_list2
        } else if (this.townName == '查干沐沦苏木' && val == 2) {
          this.list = this.cg_list3
        } else if (this.townName == '查干沐沦苏木' && val == 3) {
          this.list = this.cg_list4
        }
      },

      // 跳转到 menu 页面
      goToMenuPage() {
        this.$router.push({
          path: "/bigscreen/menuPage"
        })
      },

      // 跳转到 人口统计 图表详情
      goToPersonStateDetail() {
        let title = `巴林右旗${this.townName}人口统计`

        this.$router.push({
          path: "/bigscreen/personState" + title
        })
      },

      // 跳转到 机械化统计 图表详情
      goToMashineStateDetail() {
        let title = `巴林右旗${this.townName}机械化统计`

        this.$router.push({
          path: "/bigscreen/mashineState" + title
        })
      },
    }
  }
</script>

<style scoped lang="less">
  // @import url('../../../../assets/css/bigscreen.less');
  .activeColor {color: rgb(13, 246, 94) !important; }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    
  }
</style>